$gray: #f8f8f8;
$white: #ffffff;
$green: #40d2b1;
$green-dark: #2c8e78;
$padding: 80px 0;

// 使用插值表达式解决兼容性问题
@mixin more($name, $value) {
  -webkit-#{$name}: $value;
  -ms-#{$name}: $value;
  -o-#{$name}: $value;
  -moz-#{$name}: $value;
  #{$name}: $value;
}

@mixin load {
  /*navbar*/
  header {
    .navbar-default {
      @include more(box-shadow, 0px 5px 8px 0px rgba(50, 50, 50, 0.25));

      .navbar-brand {
        font-size: 30px;
        font-weight: bold;
        color: $green;
        line-height: 35px;
      }
      .navbar-nav > li > a {
        font-size: 16px;
        font-weight: bold;
        color: #666;
        height: 70px;
        line-height: 35px;
      }
      .navbar-toggle {
        margin-top: 17px;

        &:hover {
          border-color: $green;
          background-color: $green;
        }
        .icon-bar {
          background-color: $green-dark;
        }
      }
    }
  }

  /*footer*/
  footer {
    font-weight: 400;
    text-align: center;
    padding: 20px;
  }
}

// 滤镜，遮罩层
@mixin lvjing {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  padding: $padding;
}

@mixin background-image($img) {
  background: url($img);
  background-size: cover;
  background-repeat: no-repeat;
}

// 圆角，内容居中
@mixin circle($radius) {
  width: $radius;
  height: $radius;
  min-width: $radius;
  @include more(border-radius, 50%);
  position: relative;

  &::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  & > * {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
